<template xmlns:margin="http://www.w3.org/1999/xhtml">
  <div>
    <!--     顶部面包屑标识与导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }">
        <i class="el-icon-s-promotion"></i> 后台首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>库存列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <!--实时的模糊查询-->
     <div style="width:200px;margin:50px 0;">
       <el-input style="text-align: right;" width="50" v-model="input" @input="handleInput" placeholder="根据商品名关键字搜索" suffix-icon="el-icon-search"></el-input>
     </div>
<!--库存列表数据-->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="库存编号" width="100" align="center"></el-table-column>
      <el-table-column prop="goodsName" label="商品名称" header-align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="dangerNum" label="报警预值" width="80" align="center"></el-table-column>
      <el-table-column prop="goodsNum" label="商品数量" width="100" align="center"></el-table-column>
      <el-table-column prop="providerName" label="供应商" header-align="center"   show-overflow-tooltip></el-table-column>
      <el-table-column prop="gmtCreate" label="创建时间" width="180" align="center"></el-table-column>
      <el-table-column prop="gmtModified" label="更新时间" width="180" align="center"></el-table-column>
      <el-table-column prop="operation" label="操作" width="180" header-align="center">
       <template slot-scope="scope" >
         <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="openDeleteConfirm(scope.row)"></el-button>
       </template>
      </el-table-column>
    </el-table>
    <!--分页控件-->
    <span class="demonstration"></span>
    <div style="margin:20px 0; text-align: right;">
      <el-pagination
          layout="total,prev, pager, next"
          @current-change="changePage"
          :page-size="pageSize"
          :current-page="currentPage"
          :total="total">
      </el-pagination>

    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
       ],
      total: 0,
      pageSize: 0,
      currentPage: 0,
      input:'',
      val:''
    }
  },
  methods:{
    handleInput(val)
    {
      //取网址上的值
      let pageNum=this.$router.currentRoute.query.pageNum;
      if(!pageNum){pageNum=1;}
      let url='http://localhost:9090/repertory/fuzzy-query?pageNum='+pageNum+'&keyword='+val;
      this.axios.get(url).then((response)=>{
        let jsonResult=response.data;
        if(jsonResult.state==20000)
        {
          this.tableData=jsonResult.data.list;
          this.total= jsonResult.data.total;
          this.pageSize=jsonResult.data.pageSize;
          this.currentPage=jsonResult.data.currentPage;
        }else{
          let title='操作失败';
          this.$alert(jsonResult.message,title,{
            confirmButtonText:'确定',
            callback:action => {

            }
          });
        }
      });
    },
    handlerDelete(tableItem)//执行删除的函数
    {
      let url='http://localhost:9090/repertory/delete?id='+tableItem.id;
      this.axios.post(url).then((response)=>{
        let jsonResult=response.data;
        if(jsonResult.state==20000)
        {
             alert('删除['+tableItem.goodsName+']商品库存成功！');
             //刷新页面
             this.loadRepertoryList();
        }else{
          let title='操作失败';
          this.$alert(jsonResult.message,title,{
            confirmButtonText:'确定',
            callback:action => {

            }
          });
        }
      });
    },
    changePage(pageNum)
    {
          this.$router.replace('?pageNum='+pageNum)
          this.loadRepertoryList();
    },
    openDeleteConfirm(tableItem){
      let message='此操作将永久删除['+tableItem.goodsName+']的库存信息,是否继续?';

      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
       this.handlerDelete(tableItem)//点击删除按钮时，调用删除函数
      }).catch(() => {

      });
    },
    loadRepertoryList()
    {
      //取网址上的值
      let pageNum=this.$router.currentRoute.query.pageNum;
      if(!pageNum){pageNum=1;}
      let url='http://localhost:9090/repertory/list?pageNum='+pageNum;
      this.axios.get(url).then((response)=>{
        let jsonResult=response.data;
        if(jsonResult.state==20000)
        {
           this.tableData=jsonResult.data.list;
           this.total= jsonResult.data.total;
           this.pageSize=jsonResult.data.pageSize;
           this.currentPage=jsonResult.data.currentPage;
        }else{
          let title='操作失败';
          this.$alert(jsonResult.message,title,{
            confirmButtonText:'确定',
            callback:action => {

            }
          });
        }
      });
    }
  },
  mounted(){
  this.loadRepertoryList();
  }
}
</script>

